import React, { useMemo } from "react";
import Router from "./router";
import { SnackbarProvider } from "notistack";
import { useState } from "react";
import { createTheme, ThemeProvider } from "@mui/material";
import { queryClient } from "./query/CustomQueryClient";
import { QueryClientProvider } from "@tanstack/react-query";
import { blue, green, purple, red } from "@mui/material/colors";
import "./app.css";
import getLocalMode from "./api/getLocalMode";
import getLocalColor from "./api/getLocalColor";
import { LocalizationProvider } from "@mui/x-date-pickers";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
export const UserIdContext = React.createContext();
export const UserContext = React.createContext();
export const UserProContext = React.createContext();
export const ThemeColorContext = React.createContext();
export const ModeContext = React.createContext();
function App() {
  const [userId, setUserId] = useState("");
  const [user, setUser] = useState(-1);
  const [mode, setMode] = useState(getLocalMode());
  const [themeColor, setThemeColor] = useState(getLocalColor());
  const colors = [
    {
      primary: {
        // main: "#1976d2", //蓝色
        main: "#002FA7",
      },
      secondary: purple,
    },
    {
      primary: {
        main: "#9c27b0", //紫色
      },
      secondary: blue,
    },
    {
      primary: {
        main: "#2e7d32", //绿色
      },
      secondary: {
        main: "#ed6c02", //橙色
      },
    },
    {
      primary: {
        main: "#9c0c13", //山大红
      },
      secondary: blue,
    },
  ];
  const [userPro, setUserPro] = useState({
    name: "里斯",
    gender: "MALE",
    birthday: "2003-06-27",
    className: "4",
    major: "软件工程",
    grade: "2021",
    area: "110101000000",
    avatar: "",
  });

  const theme = useMemo(() =>
    createTheme({
      palette: {
        mode: mode,
        ...colors[themeColor],
      },
    })
  );
  return (
    <div className="App">
      <QueryClientProvider client={queryClient}>
        <UserProContext.Provider value={{ userPro, setUserPro }}>
          <UserIdContext.Provider value={{ userId, setUserId }}>
            <UserContext.Provider value={{ user, setUser }}>
              <SnackbarProvider maxSnack={3}>
                <ThemeProvider theme={theme}>
                  <ModeContext.Provider value={{ mode, setMode }}>
                    <ThemeColorContext.Provider
                      value={{ themeColor, setThemeColor }}
                    >
                      <LocalizationProvider dateAdapter={AdapterDayjs}>
                        <Router />
                      </LocalizationProvider>
                    </ThemeColorContext.Provider>
                  </ModeContext.Provider>
                </ThemeProvider>
              </SnackbarProvider>
            </UserContext.Provider>
          </UserIdContext.Provider>
        </UserProContext.Provider>
      </QueryClientProvider>
    </div>
  );
}
export default App;
